body
{
    background-color: #eee; /* Applying here to style overscroll */
    font-family: "Lato", Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
    color: #555;
    font-size: 16px;
    min-width: 480px;
}
main
{
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f9f9f9', endColorstr='#ffffff')"; /* IE 8-9 */
    background: linear-gradient(180deg, #f9f9f9 0%, #fff 250px);
    background-color: #fff; /* Real background color */
    overflow: hidden;
}
main > section
{
    position: relative;
}

a
{
    color: #4075BF;
}
a:hover
{
    color: #3662A1;
}
a:not([href]),
a:not([href]):hover
{
    color: inherit;
}

p
{
    margin: 0.6em 0;
}

ul,
ol
{
    padding-left: 1.8em;
}

table
{
    border-collapse: collapse;
}
td
{
    vertical-align: top;
}
th
{
    vertical-align: top;
    text-align: left;
    font-weight: normal;
}

label
{
    display: block;
}

pre
{
    background-color: #f6f6f6;
    border-radius: 3px;
    padding: 3px 8px;
    overflow-x: auto;
}
pre > code
{
    padding: 0;
    background-color: transparent;
}

tt,
code,
span.setting,
span.command,
span.key,
span.property,
span.attribute,
span.element,
span.method,
span.attribute
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    background-color: #f3f3f3;
    border-radius: 2px;
    padding: 1px 5px;
}

span.parameter
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    font-weight: bold;
}

span.data-type
{
    font-style: italic;
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    background-color: #f3f3f3;
    border-radius: 2px;
    /* Smaller padding on left due to italic slant */
    padding: 1px 5px 1px 4px;
}

input[type=text],
input[type=email],
input[type=number],
textarea
{
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    padding: 2px;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    border-radius: 1px;
}
input[type=text],
input[type=email]
{
    width: 220px;
}
input[type=number]
{
    width: 50px;
}
textarea
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
}
input[type=button],
input[type=submit]
{
    margin-top: 0.5em;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 3px;
    color: #fff;
    background-color: #999;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
}
input[type=button]:hover,
input[type=submit]:hover
{
    background-color: #777;
}

h1
{
    font-size: 34px;
    line-height: 54px;
    font-weight: normal;
    margin-bottom: 0.5em;
    margin-top: 0.7em;
}
h1 > span
{
    padding: 2px 10px 3px;
    background-color: rgba(0, 0, 0, 0.05);
    position: relative;
    left: -10px;
    color: #666;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
h1 a,
h1 a:hover
{
    text-decoration: none;
    color: #555;
}
h2
{
    color: #444;
    font-size: 1.5em;
    font-weight: normal;
    margin-top: 1em;
    margin-bottom: 0.4em;
}
h1 + h2
{
    margin-top: 0.7em;
}
h2 a,
h2 a:hover
{
    text-decoration: none;
    color: #777;
}
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h1 span.key,
h2 span.key,
h3 span.key,
h4 span.key,
h5 span.key
{
    font-size: 1em;
    text-transform: none;
}

h3
{
    font-size: 1.2em;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: normal;
    margin-top: 0.7em;
    margin-bottom: 0.4em;
}
h4
{
    font-size: 1.1em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: normal;
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}
h5
{
    font-size: 1.0em;
    color: #888;
    letter-spacing: 0.5px;
    font-weight: normal;
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}

header > section,
footer > section,
main > section
{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
main > section
{
    width: 1140px;
    background-image: url(/images/icon_grey_top.svg);
    background-repeat: no-repeat;
    background-position: right 32px bottom 0;
    background-size: 256px auto;
    min-height: 350px;
    padding-bottom: 100px;
}
main > section:after
{
    content: "";
    display: table;
    clear: both;
}

html.hq main > section
{
    background-image: none;
}

div.primary
{
    float: left;
    max-width: 100%;
}
div.primary > section
{
    max-width: 800px;
}
/* This emulates the margin collapsing when the div.primary is not present */
div.primary > p:first-child,
div.primary > section:first-child > p:first-child
{
    margin-top: 0;
}

header
{
    background-color: #4B4B4B;
    padding: 18px 0 12px;
}

header > section:after
{
    content: "";
    display: table;
    clear: both;
}

header a#logo
{
    float: left;
}
header a#logo img
{
    width: 220px;
    height: 28px;
    display: block;
    border: none;
    transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
}
header a#logo:hover img
{
    opacity: 0.8;
}

/*
The Sublime HQ logo doesn't have symbol, so the space
for that is empty compared to Sublime Text and Sublime
Merge. We relatively position it when space gets tight
so that there isn't an unnatural gap. We leave the space
in the logo for desktop browsers so the word "Sublime"
is always aligned between the three sites. */
@media only screen and (max-width: 1200px)
{
    html.hq > section
    {
        max-width: 1140px;
    }
    html.hq a#logo
    {
        position: relative;
        left: -30px;
    }
}
@media only screen and (max-width: 1140px)
{
    html.hq > section
    {
        max-width: 100%;
    }
}

header nav
{
    float: right;
    line-height: 22px;
}

header nav a
{
    color: #fff;
    text-decoration: none;
    margin-left: 32px;
    display: inline-block;
    transition: color 0.15s ease-in-out;
    -webkit-transition: color 0.15s ease-in-out;
}

header nav a:hover
{
    color: #ddd;
}

header nav a:first-child
{
    margin-left: 0;
}

header nav span.vr
{
    display: inline-block;
    width: 1px;
    margin-left: 32px;
    background-color: rgba(255, 255, 255, 0.5);
    height: 22px;
    vertical-align: bottom;
}

footer > section
{
    width: 1140px;
    padding: 20px 0;
    background-image: url(/images/icon_grey_bottom.svg);
    background-repeat: no-repeat;
    background-position: right 32px top 0;
    background-size: 256px auto;
    min-height: 128px;
}

html.hq footer > section
{
    background-image: none;
}

aside
{
    float: left;
    max-width: calc(100% - 848px);
    margin-left: 48px;
    margin-bottom: 32px;
}
aside h3
{
    margin-bottom: 0.5em;
}
aside > h3:first-child
{
    margin-top: 0;
}
aside p
{
    margin: 0.5em 0;
}
aside > p:first-child
{
    margin-top: 0;
}

aside #callout
{
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 15px;
    color: #555;
    height: 130px;
    overflow: hidden;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 220px;
}
aside #callout a
{
    color: #555;
    text-decoration: none;
    display: block;
}
aside #callout img#merge-screenshot
{
    max-width: 450px;
    margin-top: 8px;
    width: 450px;
    display: block;
}
aside #callout img.icon
{
    position: relative;
    width: 20px;
    top: 4px;
    margin-right: 3px;
}
aside #callout span.subhead
{
    font-size: 0.9em;
    opacity: 0.8;
}

main > section > section,
article
{
    max-width: 800px;
    clear: left;
}

kbd
{
    font-family: "Roboto Mono", monospace;
    background-color: #f3f3f3;
    color: #333;
    border-radius: 2px;
    padding: 1px 5px;
    font-size: 14px;
}

span.keys span.mouse
{
    font-style: italic;
}

span.keys i
{
    padding: 0 2px;
    font-style: normal;
}

span.keys b
{
    background-color: #f3f3f3;
    border-radius: 2px;
    padding: 1px 6px;
    border: 1px solid #ccc;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fff inset;
    display: inline-block;
    font-size: 0.9em;
    color: #444;
    font-weight: normal;
}

span.feature
{
    font-style: italic;
    color: #333;
}

span.file,
span.symbol
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    border-bottom: 1px dotted #aaa;
}

span.file b,
span.symbol b
{
    color: #333;
}

span.menu
{
    background-color: #f3f3f3;
    color: #333;
    border-radius: 2px;
    padding: 1px 5px;
}
span.menu i
{
    color: #aaa;
    font-style: normal;
    font-size: 0.6em;
    padding: 0 2px 0 3px;
    position: relative;
    top: -1px;
}

html.plat_linux span.keys.mac,
html.plat_windows span.keys.mac
{
    display: none;
}
html.plat_osx span.keys.pc
{
    display: none;
}

@media only screen and (max-width: 550px)
{
    div.new-feature
    {
        width: auto;
    }

    header nav span.vr.sub-nav
    {
        margin-left: 0px;
        width: 0;
        height: 8px;
        display: block;
    }
    header nav span.vr.sub-nav + a
    {
        margin-left: 0px;
    }
}
@media only screen and (max-width: 820px)
{
    /*
    This has to be defined like this so it has greater specificity than
    later rules in other stylesheets that do not apply to narrow windows */
    body header
    {
        padding: 15px 0;
    }
    header nav
    {
        float: none;
        clear: left;
        padding-top: 15px;
    }
    header nav a
    {
        margin-left: 20px;
    }
    header nav span.vr
    {
        margin-left: 20px;
    }
}
@media only screen and (max-width: 1160px)
{
    main > section
    {
        background-position: right 20px bottom 0;
        background-size: 192px auto;
    }
    footer > section
    {
        background-position: right 20px top 0;
        background-size: 192px auto;
        min-height: 112px;
    }
}
@media only screen and (max-width: 1240px)
{
    header > section,
    footer > section,
    main > section
    {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
}
@media only screen and (max-width: 1100px)
{
    aside
    {
        float: none;
        clear: both;
        max-width: 100%;
        margin: 0;
        padding: 40px 0 20px;
    }
}

/**
 * General
 */

 p.note
 {
     color: #fff;
     padding: 0.5em 0.8em 0.5em 0.8em;
     border-radius: 3px;
     background-color: #7a94b8;
     font-style: italic;
 }
 p.note a
 {
    color: #fff;
 }
 p.note span.setting
 {
    background-color: rgba(255, 255, 255, 0.3);
 }

/**
 * Homepage
 */
div#masthead
{
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5c4785', endColorstr='#428a8a')"; /* IE 8-9 */
    background: linear-gradient(-40deg,#9a326b 0,#42668a 100%);
    overflow: hidden;
}

div#masthead section
{
    width: 1200px;
    margin: 25px auto 0;
}
div#masthead section.screencast
{
    clear: right;
    margin-top: 0;
    padding-top: 25px;
}
div#masthead section.screencast div.wrap
{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}
/* These styles have the box corners follow the title bar corner radius
 * so that the box-shadow doesn't leave empty sharp corners. Percentages
 * are used so when the width is scaled for narrow viewports, the radius
 * is still correct. */
div#masthead section.screencast div.wrap.plat_osx
{
    border-radius: 0.79% 0.79% 0 0 / 1.57% 1.57% 0 0;
}
div#masthead div.wrap.plat_osx #title-overlay
{
    border-radius: 0.82% 0.82% 0 0 / 1.35% 1.35% 0 0;
}

div#masthead section.screencast div.wrap.plat_linux
{
    border-radius: 0.7% 0.7% 0 0 / 1.4% 1.4% 0 0;
}
div#masthead div.wrap.plat_linux #title-overlay
{
    border-radius: 0.7% 0.7% 0 0 / 1.1% 1.1% 0 0;
}

div#masthead > section
{
    position: relative;
}

section#merge-footer
{
    min-height: auto;
}

section#merge-footer #callout
{
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 15px;
    color: #555;
    width: 300px;
    height: 150px;
    overflow: hidden;
    line-height: 1.2;
    margin: 30px auto 0;
}
section#merge-footer #callout a
{
    color: #555;
    text-decoration: none;
    display: block;
}
section#merge-footer #callout img#merge-screenshot
{
    max-width: 450px;
    margin-top: 8px;
    width: 450px;
    display: block;
}
section#merge-footer #callout img.icon
{
    position: relative;
    width: 20px;
    top: 4px;
    margin-right: 3px;
}
section#merge-footer #callout span.subhead
{
    font-size: 0.9em;
    opacity: 0.8;
}

#anim_container
{
    position: relative;
    overflow: hidden;
}
#fallback
{
    position: relative;
    display: none;
}
#title-overlay
{
    padding-top: 13%;
    color: #fff;
    background-color: rgba(32, 32, 32, 0.8);
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 2em;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
}
#title-overlay.show
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100), progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80202020', endColorstr='#80202020')"; /* IE 8 */
    opacity: 1;
}
#title-overlay div
{
    text-align: center;
    max-width: 896px; margin: 0 auto;
}
#title-overlay div span.feature
{
    color: #ddd;
}


div#masthead section div.tagline
{
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

div#masthead section div.tagline h1
{
    line-height: inherit;
    font-size: 3em;
    margin-top: 0;
    margin-bottom: 0;
}
div#masthead section div.tagline h1 span
{
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: 3px;
    left: unset;
    position: unset;
    color: #fff;
    font-weight: bold;
}

div#masthead section div.tagline.minor
{
    font-weight: normal;
    font-size: 18px;
    line-height: 30px;
}
div#masthead section div.tagline.minor i
{
    font-style: italic;
    opacity: 0.8;
}

div#masthead section div.tagline.minor span
{
    background-color: transparent;
}

canvas
{
    display: block;
}

section.screencast-meta
{
    width: auto;
    margin: 0 auto;
    padding: 10px 40px 15px;
    font-size: 0.9em;
    color: #777;
    background-color: #fff;
    min-height: 105px;
    max-width: 1200px;
    box-sizing: border-box;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    position: relative;
    background-image: none;
}
section.screencast-meta .captions > div > b
{
    display: block;
    margin-bottom: 5px;
}
section.screencast-meta .buttons
{
    position: absolute;
    right: 1px;
    top: 5px;
}
section.screencast-meta .buttons a
{
    text-decoration: none;
    color: #999;
    transition: color 0.15s ease-in-out;
    -webkit-transition: color 0.15s ease-in-out;
}
section.screencast-meta .buttons a:hover
{
    color: #666;
}
section.screencast-meta .buttons svg
{
    fill: currentColor;
    padding: 2px 4px;
}
section.screencast-meta .buttons #button-play
{
    display: none;
}
section.screencast-meta #indicators
{
    position: absolute;
    text-align: center;
    top: -3px;
    width: 100%;
}
section.screencast-meta a
{
    text-decoration: none;
    padding: 2px 4px;
    display: inline-block;
}
section.screencast-meta a .jump
{
    border-radius: 2px;
    background-color: #ccc;
    height: 4px;
    width: 35px;
    display: inline-block;
    transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
}
section.screencast-meta a.active .jump
{
    background-color: #888;
}
section.screencast-meta a:hover .jump
{
    background-color: #666;
}

div.theme-selector
{
    position: absolute;
    top: -10px;
}

div.os-selector
{
    position: absolute;
    top: -10px;
    right: 0;
}

div.theme-selector a,
div.os-selector a
{
    border: 1px solid #ccc;
    background-color: rgba(238, 238, 238, 0.8);
    text-decoration: none;
    color: #666;
    font-size: 0.8em;
}

div.theme-selector a#theme-selector-dark,
div.os-selector a#os-selector-linux
{
    border-right: none;
    padding: 0 8px 1px 12px;
    border-radius: 3px 0 0 3px;
    float: left;
}

div.os-selector a#os-selector-linux
{
    float: right;
}

div.os-selector a#os-selector-mac
{
    border-left: none;
    border-right: none;
    padding: 0 8px 1px 12px;
    border-radius: 0;
    float: right;
}

div.theme-selector a#theme-selector-light,
div.os-selector a#os-selector-windows
{
    border-left: none;
    padding: 0 12px 1px 10px;
    border-radius: 0 3px 3px 0;
    float: right;
}

div.theme-selector a.current,
div.os-selector a.current
{
    background-color: rgba(204, 204, 204, 0.8);
}

div#masthead div.download
{
    text-align: center;
    margin: 20px auto 25px;
}
div.download div
{
    display: inline-block;
}
div.download .button
{
    padding-left: 20px;
}

div.download .button span
{
    display: none;
}
div.download .button a
{
    display: inline-block;
    background-color: #3C78B4;
    color: #fff;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 15px;
    transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
}
div.download .button a:hover
{
    background-color: #369;
}
div.download .current_version,
div.download .changelog
{
    margin-left: 20px;
    color: rgba(255, 255, 255, 0.8);
}
div.download .changelog
{
    padding-right: 20px;
}
div.download .changelog a
{
    color: rgba(255, 255, 255, 0.8);
}
html.plat_windows.arch_64 div.download .button span.win.show_64
{
    display: block;
}
html.plat_windows.arch_32 div.download .button span.win.show_32
{
    display: block;
}
html.plat_linux div.download .button span.linux
{
    display: block;
}
html.plat_osx div.download .button span.mac
{
    display: block;
}

h2.love
{
    text-align: center;
    margin: 1.2em 0 0;
    font-size: 34px;
    line-height: 54px;
    font-weight: normal;
}
h2.love span
{
    padding: 3px 10px;
    background-color: rgba(0, 0, 0, 0.05);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: 3px;
}

@media only screen and (max-width: 1240px)
{
    div.os-selector {
        right: 20px;
    }
}

@media only screen and (max-width: 820px)
{
    div.download .button,
    div.download .current_version,
    div.download .changelog
    {
        display: block;
        padding: 0;
        margin: 0;
    }
    div.download .button
    {
        margin-bottom: 5px;
    }
    #title-overlay
    {
        font-size: 1.4em;
    }
    img
    {
        max-width: 100%;
        width: auto;
        height: auto;
    }

    div#masthead section div.tagline h1
    {
        font-size: 30px;
        line-height: 46px;
        text-align: center;
    }

    div#masthead div.download
    {
        text-align: center;
    }

    div#masthead #merge-screenshot
    {
        position: absolute;
        top: 5px;
        left: 200px;
    }
}
@media only screen and (max-width: 700px)
{
    div.new-feature
    {
        width: auto;
    }
}
@media only screen and (max-width: 1000px)
{
    section.screencast-meta
    {
        padding-top: 20px;
    }
    #title-overlay
    {
        font-size: 1.6em;
    }
}
@media only screen and (max-width: 1240px)
{
    div#masthead section
    {
        /* Account for switch to border-box */
        width: 1240px;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
    section.screencast-meta
    {
        width: auto;
        margin: 0 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    section.screencast-meta div.captions
    {
        max-width: 100%;
    }
    canvas
    {
        max-width: 100%;
    }
}

/**
 * Download pages
 */

div.release-date
{
    margin-top: -1em;
    font-style: italic;
    margin-bottom: 1em;
    font-size: 0.9em;
    color: #888;
}

div.downloads
{
    margin: 1em 0;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px 15px;
    border: 1px solid #ddd;
}
div.downloads *:first-child
{
    margin-top: 0;
}
div.downloads *:last-child
{
    margin-bottom: 0;
}

section#changelog article
{
    padding: 1em 1em 0.5em;
    border-top: 1px solid #ddd;
}
section#changelog article h3
{
    margin-top: 0;
}
section#changelog article h4,
article.post h4
{
    margin: 0.7em 0 0.3em;
}
section#changelog article ul.topic,
article.post ul.topic,
article.changelog ul.topic
{
    margin: 0.3em 0;
}
section#changelog article.current
{
    border-left: 3px solid #A8B3C2;
}

p.eval,
p.beta,
p.windows-only
{
    font-style: italic;
    color: #777;
}

p.latest
{
    margin-bottom: 0;
    font-weight: bold;
    color: #777;
}

p.newer,
p.unmaintained
{
    font-size: 1.1em;
    color: #fff;
    padding: 0.5em 0 0.5em 1em;
    border-radius: 3px;
    background-color: #d69d5c;
}
p.unmaintained
{
    background-color: #bd7575;
}
p.newer a,
p.unmaintained a
{
    color: #fff;
}

#dl
{
    margin-top: 0.2em;
    list-style-type: circle;
}

html.plat_osx .dl_osx,
html.plat_linux .dl_linux,
html.plat_windows.arch_64 .dl_win_64,
html.plat_windows.arch_32 .dl_win_32
{
    list-style-type: disc;
    font-weight: bold;
}

#direct-downloads
{
    display: none;
}
#direct-downloads.show
{
    display: block;
}
#direct-downloads em,
#direct-downloads em a
{
    color: #777;
}

/**
 * Blog
 */

article.post h2
{
    margin-top: 1em;
}
aside + article.post h2
{
    margin-top: 0;
}
div.meta span
{
    display: inline-block;
    font-size: 0.9em;
    font-style: italic;
}

div.meta span.date
{
    color: #999;
}
div.meta span.author
{
    margin-right: 2em;
    color: #999;
}
div.meta span.by
{
    color: #aaa;
    margin-left: 0.3em;
    margin-right: 0.1em;
}
article.post div.meta
{
    margin-top: -1em;
    margin-bottom: 1em;
}
article.post
{
    border-top: 1px solid #ddd;
    margin-bottom: 2em;
}
aside + article.post
{
    border-top: none;
}
h1 + div.meta
{
    margin-top: -1.1em;
    margin-bottom: 1em;
}
div.rss
{
    padding-top: 20px;
    float: right;
    width: calc(100% - 848px);
    margin-bottom: 0;
}
a.rss img
{
    width: 16px;
    height: 16px;
    border: none;
    position: relative;
    bottom: -3px;
    padding-right: 5px;
    display: inline;
}
@media only screen and (max-width: 1100px)
{
    div.rss
    {
        width: auto;
        padding-right: calc(100% - 800px);
        float: right;
        box-sizing: border-box;
    }
    a.rss
    {
    }
}
aside section.archives h3
{
    margin-top: 0;
}
div.primary:after
{
    content: "";
    display: table;
    clear: both;
}
a.blog_nav.left
{
    padding-right: 10px;
}
a.blog_nav.left img
{
    padding-right: 3px;
}
a.blog_nav.right img
{
    padding-left: 3px;
}

article.changelog
{
    border-left: 3px solid #A8B3C2;
    padding: 0.5em 1em 0.5em;
}
article.changelog > h3:first-child
{
    margin-top: 0;
}

/**
 * Buy
 */

section.form,
form section
{
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px 15px;
    border: 1px solid #ddd;
    width: 400px;
    margin: 1.5em 0;
}
section.form > h3:first-child,
form section > h3:first-child
{
    margin-top: 0;
}
section.form *:last-child,
form section *:last-child
{
    margin-bottom: 0;
}
section.form h3,
form section h3
{
    margin-bottom: 0.3em;
    margin-top: 0.5em;
}

form table
{
    width: 100%;
}
form td,
form th
{
    padding: 2px 0;
}
form th
{
    padding-right: 10px;
}
form#f
{
    margin-top: 1.5em;
}
#buyform .price
{
    font-weight: bold;
}
#buyform .buttons
{
    margin-top: 0.5em;
}
#buyform .buttons .card
{
    background-color: #A8B3C2;
    margin-right: 0.5em;
}
#buyform .buttons .card:hover
{
    background-color: #8796ab;
}
#buyform .buttons .paypal
{
    background-color: #A8B3C2;
}
#buyform .buttons .paypal:hover
{
    background-color: #8796ab;
}
#quantity_section
{
    margin-top: 1em;
    margin-bottom: 1.8em;
}
#quantity_section table
{
    width: auto;
}
#quantity_section th
{
    padding-right: 10px;
}
#quantity_section tr.pricing
{
    font-size: 0.85em;
    color: #777;
    font-style: italic;
}
#quantity_section tr.pricing th
{
    text-align: right;
}

section.notes
{
    margin-top: 1.5em;
}
section.notes p
{
    font-size: 0.85em;
    font-style: italic;
    color: #777;
}

.license-for td
{
    padding-top: 10px;
}
.info_msg
{
    font-size: smaller;
    color: #777;
    font-style: italic;
}

pre.license_key
{
    margin: 1em 0;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px 15px;
    border: 1px solid #ddd;
}

span.best-value,
span.new,
article.changelog span.new,
span.updated
{
    color: white;
    padding: 0 5px 0;
    border-radius: 2px;
    font-size: 0.8em;
    display: inline-block;
    margin-left: 0.8em;
}
span.best-value,
span.new,
article.changelog span.new
{
    background-color: #f09642;
}
span.updated
{
    background-color: #92c3c3;
}
article.changelog h3 span.new
{
    font-size: 0.8rem;
    text-transform: none;
    position: relative;
    top: -2px;
}

/* Fonts */

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'),
       url('/fonts/lato-v16-latin-italic.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('/fonts/lato-v16-latin-regular.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'),
       url('/fonts/lato-v16-latin-700.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
       url('/fonts/lato-v16-latin-700italic.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-700italic.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
       url('/fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'),
       url('/fonts/roboto-mono-v7-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
       url('/fonts/roboto-mono-v7-latin-700.woff2') format('woff2'),
       url('/fonts/roboto-mono-v7-latin-700.woff') format('woff');
}

/* TEMP: backwards compat styles ; */

h1 > span > a
{
    font-size: 0.85rem;
    line-height: 1.2rem;
    top: 4px;
    left: 10px;
    color: #888;
    position: absolute;
    padding-left: 0;
    transition: padding-left 100ms 50ms;
    text-transform: uppercase;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #777;
}

.token.punctuation {
    color: #444;
}

.token.null,
.token.operator,
.token.boolean {
    color: #ba8baf;
}
.token.property {
    color: #3c97dd;
}
.token.number,
.token.tag {
    color: #d2322d;
}
.token.string {
    color: #9dbf40;
}
.token.selector {
    color: #ba8baf;
}
.token.attr-name {
    color: #f09642;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9dbf40;
}

.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
    color: #9dbf40;
}

.token.statement,
.token.regex,
.token.atrule {
    color: #9dbf40;
}

.token.placeholder,
.token.variable {
    color: #3c97dd;
}

.token.important {
    color: #d2322d;
    font-weight: bold;
}

.token.entity {
    cursor: help;
}

.section {
    clear: both;
    padding: 20px;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 1060px;
    display: flex;
    justify-content: center;
}

div.section.group.narrow {
    padding: 10px;
}

section.screencast-meta {
    color: #444;
    margin-bottom: 16px;
}

.section img
{
    display:block;
    margin: auto;
    max-width:100%;
    max-height:100%;
}
.section img.screenshot
{
    border-radius: 4px;
    width: 100%;
    max-width: 480px;
    height: auto;
}
.section img.icon
{
    max-height: 80px;
}

main > section.swimlane
{
    max-width: 1200px;
    width: auto;
    padding: 0;
    background-image: none;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
    border-radius: 4px 4px 0 0;
}

body#homepage footer > section,
body#download-thanks footer > section
{
    box-sizing: border-box;
    max-width: 1200px;
    width: auto;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
@media only screen and (max-width: 1240px)
{
    main > section.swimlane
    {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }

    body#homepage footer > section,
    body#download-thanks footer > section
    {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }
}

section.swimlane > section
{
    max-width: none;
    padding: 20px 0;
}

section.swimlane > section:nth-child(even)
{
    background-color: #856a93;
    color: white;
}

section.swimlane > section:last-child
{
    background-image: url(/images/icon_grey_top.svg);
    background-repeat: no-repeat;
    background-position: right 32px bottom 0;
    background-size: 256px auto;
}
@media only screen and (max-width: 1240px)
{
    section.swimlane > section:last-child
    {
        background-position: right calc() bottom 0;
    }
}
@media only screen and (max-width: 1160px)
{
    section.swimlane > section:last-child
    {
        background-position: right 20px bottom 0;
        background-size: 192px auto;
    }
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 0 0 0 4%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF SIX  */
.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 82.66%;
}

.span_4_of_6 {
    width: 62.66%;
}

.span_3_of_6 {
    width: 48%;
}

.span_2_of_6 {
    width: 30.66%;
}

.span_1_of_6 {
    width: 13.33%;
}


.section.features
{
    display: block;
    margin-top: 2em;
}

.features .feature
{
    width: 16.66%;
    float: left;
    margin: 0;
}

img.social_icon
{
    position: absolute;
    right: 1rem;
    width: 1rem;
    height: 1rem;

}

img.profile_picture
{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 1px 1px 5px #3a3a3a4d;
    margin: 0px auto 8px auto;
}

.review
{
    display: inline-block;
    position: relative;
    background-color: white;
    border-radius: 4px;
    box-shadow: 1px 1px 5px #3a3a3a4d;
    padding: 1em;
}

.review_header
{
    display: flex;
    flex-direction: column;
    text-align: center;
}

a.reviewer
{
    text-decoration: none;
    color: #555;
    font-size: 0.8rem;
}

.review_body
{
    display: flex;
    flex-direction: column;
    color: #555;
}

.twitter_follow a:hover
{
    background-color: #0C66A1;
    color: white;
}

.twitter_follow a
{
    display: inline-block;
    height: 20px;
    box-sizing: border-box;
    padding: 1px 8px 1px 8px;
    background-color: #157BBC;
    color: white;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
}

.collapse_image
{
    justify-items: center;
    display: flex;
}

@media only screen and (max-width: 820px) {
    div.theme-selector { top: -48px;  }
    div.theme-selector a { line-height: 3.8; }
    .col:first-child { margin-left: auto; }
    .col {  margin: 1% auto; }
    .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width:100%; max-width:480px; }
    .section { display: flex; flex-flow: column; }
    .image{order:2;}
    .collapse_image {display: none;}
    .text{order:1;}
    .section img {margin: auto; }
}

@media only screen and (max-width: 1024px)
{
    .features .feature
    {
        width: 33.33%;
    }
    .features .feature:nth-of-type(3n+1)
    {
        clear: left;
    }
}
@media only screen and (max-width: 640px)
{
    .features .feature
    {
        width: 50%;
    }
    .features .feature:nth-of-type(2n+1)
    {
        clear: left;
    }
    .features .feature:nth-of-type(3n+1)
    {
        clear: none;
    }
    /* Overrides base CSS to make all images on phones 100% width */
    .features .feature img {
        width: initial;
    }
}

section.swimlane .span_6_of_6 h2
{
    margin-top: 0;
}
section.swimlane h2
{
    font-weight: bold;
    font-size: 2em;
    margin-top: 0.5em;
}
section.swimlane h2.centered
{
    margin-top: 0;
    text-align: center;
}
section.swimlane h2.inverted
{
    color: white;
}

section.swimlane h3
{
    text-align: center;
    font-size: 1.5em;
    margin-top: 0;
}

section .product_card_header h3
{
    text-transform: unset;
    font-size: 2em;
}

div.badge
{
    margin: auto;
    width: 120px;
    min-height: 135px;
    padding: 12px;
    text-align: center;
    font-size: 1em;
    color: #555;
}
div.badge img
{
    margin-bottom: 0.8em;
}

header a#logo img
{
    width: 220px;
    height: 28px;
}

div.download
{
    text-align: center;
}

div.download a.other_platforms,
a.direct_downloads
{
    display: inline-block;
    margin: 10px auto 0;
    color: white;
}

a.direct_downloads:hover
{
    color: #d1d1d1;
}


a.direct_downloads:not([href]):hover
{
    color: inherit;
}


.masthead-direct-downloads
{
    max-width: 500px;
    margin: 0 auto;
    background-color: white;
    display: block;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
    border-radius: 4px;
}

div.download .button {
    padding-left: 0px;
}

img.product_card_icon
{
    border-radius: 4px;
    width: 5em;
    height: 5em;
    margin: 0px 20px 0px 0px;
}

.product_card
{
    min-height: 13em;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: white;
    border-radius: 4px;
    box-shadow: 1px 1px 5px #3a3a3a4d;
    padding: 1em;
    color: #555;
}

.product_card_header
{
    display: flex;
    align-items: center;
}

.product_card_body
{
    display: block;
}

.product_card_buttons
{
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product_card_buttons > div.download
{
    margin: 0 1em;

}